<template>
  <a-card :bordered="false">
  <a-spin :spinning="spinning != 0">
    <div class="wdp-process-content">
      <a-row>
        <a-col :span="12" class="bpm-search">
          <a-input-search :placeholder="$t('m.bpm.other.placeholder_searchByName')" enter-button @search="searchByName"/>
        </a-col>
      </a-row>
      <a-row class="items">
        <a-col :span="24">
          <h3>{{$t('m.bpm.other.label_frequentProcess')}}({{customProcessList.length}})
            <button @click="changeHide">
              <ych-icon v-if="showCustom" type="down"/>
              <ych-icon v-else type="right"/>
            </button>
          </h3>
        </a-col>
        <div v-show="showCustom">
          <a-col :span="3" v-for="(item, index) in customProcessList" :key="item.id" :value="item.id">
            <ProcessCardList :item="item" :index="index" @toDetail="toDetail"
                             @addCustom="addCustom" @delCustom="delCustom"></ProcessCardList>
          </a-col>
        </div>
      </a-row>
      <a-row class="items" v-for="tab in appAndProcessList" :key="tab.id">
        <a-col :span="24">
          <h3>{{tab.groupName + '(' + tab.children.length + ')'}}
            <button @click="changeGroupHide(tab)">
              <ych-icon v-if="tab.isShow == '1'" type="down"/>
              <ych-icon v-else type="right"/>
            </button>
          </h3>
        </a-col>
        <div v-show="tab.isShow == '1'">
          <a-col :span="3" v-for="(item, index) in tab.children" :key="item.id" :value="item.id">
            <ProcessCardList :item="item" :index="index" @toDetail="toDetail"
                             @addCustom="addCustom" @delCustom="delCustom"></ProcessCardList>
          </a-col>
        </div>
      </a-row>
    </div>
    <redirect-modal ref="startForm"></redirect-modal>
  </a-spin>
  </a-card>
</template>

<script>

  import { getAction, postAction, deleteAction } from '@/api/manage'
  import ProcessCardList from './ProcessCardList'
  import RedirectModal from './redirect/RedirectModal'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'StartProcessCard',
    components: {
      ProcessCardList,
      RedirectModal,
    },
    data () {
      return {
        customProcessList: [],
        appAndProcessList: [],
        url: {
          allCategoryList: YchConstant.PREFIX_EFORM + '/manage/actAppGroup/getAppAndCustomProcDefList',
          delete: YchConstant.PREFIX_SYSTEM + '/sysCustom/delete',
          addCustom: YchConstant.PREFIX_SYSTEM + '/sysCustom/addCustom',
        },
        showCustom: true,
        spinning: 0,
      }
    },
    inject: ['addRouter'],
    methods: {
      loadData (name) {
        this.spinning++
        getAction(this.url.allCategoryList, {
          name: name || undefined
        }).then(res => {
          if (res.success) {
            this.appAndProcessList = res.result.appAndProcessList.map(item => {
              return {
                id: item.id,
                groupName: item.groupName,
                children: item.children,
                isShow: '1'
              }
            })
            this.customProcessList = res.result.customProcessList
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.spinning--
        })
      },
      searchByName (name) {
        this.loadData(name)
      },
      toDetail(id) {
        let router = null
        if (this.$store.getters.formOpenType === '2') {
          router = this.addRouter({
            path: '/bpm/addFromProcess/' + id,
            component: resolve => require(['@/views/bpm/redirect/RedirectTab.vue'], resolve),
            props: {
              id: id,
              func: 'addFromProcess',
            },
            meta: {
              title: this.$t('m.common.button.addFlow'),
            }
          }, true);
          if (router) {
            this.$router.push(router).catch(err => {})
          }
        }
        if (!router) {
          this.$refs.startForm.addFromProcess(id)
        }
      },
      refresh () {
        this.loadData()
      },
      changeHide () {
        if (this.showCustom) {
          this.showCustom = false
        } else {
          this.showCustom = true
        }
      },
      changeGroupHide (item) {
        if (item.isShow == '0') {
          item.isShow = '1'
        } else {
          item.isShow = '0'
        }
      },
      addCustom (item) {
        this.spinning++
        postAction(this.url.addCustom, {
          type: 'process',
          id: item.id,
          name: item.name
        }).then(res => {
          if (res.success) {
            this.messageUtil.success(this.$t('m.bpm.verify.tip_collectProcess'))
            this.loadData()
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.spinning--
        })
      },
      delCustom (customId) {
        this.spinning++
        deleteAction(this.url.delete, {
          id: customId
        }).then((res) => {
          if (res.success) {
            this.messageUtil.success(this.$t('m.bpm.verify.tip_unCollectProcess'))
            this.loadData()
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.spinning--
        })
      }
    },
    created () {
      this.loadData()
    },
  }
</script>

<style lang="less">

  .wdp-process-content {
  }

  .wdp-process-content .bpm-search {
    position: relative;
  }

  .wdp-process-content .items {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .wdp-process-content .items h3 {
    margin-bottom: 10px;
  }

  .wdp-process-content .items button {
    background: none;
    border: solid 0px #fff;
    outline: none;
    cursor: pointer;
  }

  .wdp-process-content .item {
    text-align: center;
    color: #333;
    padding: 20px 0px;
  }

  .wdp-process-content .item i {
    font-size: 3em;
    padding: 20px;
    border-radius: 20%;
    margin-bottom: 10px;
  }

  .wdp-process-content .item .item-name {
    white-space: nowrap;
  }

  .wdp-process-content .item .color-a {
    background: #fff1f0;
    color: #f56262;
  }

  .wdp-process-content .item .color-b {
    background: #fff6ea;
    color: #ffa940;
  }

  .wdp-process-content .item .color-c {
    background: #fff7e0;
    color: #f5c64d;
  }

  .wdp-process-content .item .color-d {
    background: #e9f7ef;
    color: #52ce87;
  }

  .wdp-process-content .item .color-e {
    background: #e6f5fa;
    color: #6ecdf1;
  }

  .wdp-process-content .item.active {
    background: #f5f5f5;
    border-radius: 10%;
    position: relative;
  }

  .wdp-process-content .item.active .item-star {
    position: absolute;
    right: 0px;
    top: 0px;
    color: #f5a623;
    font-size: 18px;
  }

  /*.wdp-process-content .item.active::before {
    position: absolute;
    right: 15px;
    top: 15px;
    font-family: 'FontAwesome';
    content: "\f005";
    color: #f5a623;
  }*/

</style>
